<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, user-scalable=0, minimal-ui" charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="css/index.css" />
        <link rel="stylesheet" href="css/swiper.css" />
        <link rel="stylesheet" href="css/mint.css">
    </head>
    <script src="js/serverUrl.js"></script>
    <script src="js/vue.js"></script>
    <script src="js/mint.js"></script>
    <script src="js/moment.js"></script>
    <body>
        <div id="app">
            
            <div class="tradeBar" >
               <div class="tradeContainer" style="width: 100vw;">
                <div v-for="(item,index) in artTradeList"
                     class="trade"
                     :style="{'color': (item.selected?'#C7000A':'gray'),'border-color': (item.selected?'#C7000A':'gray')}"
                     v-on:click="tradeClick(index)">{{item.moduleName}}</div>
               </div>
            
              </div>
            
            <div id="table" class="card">
                <div v-for="(news,index) in newsList">
                    <div   class="jinengNews" v-on:click="toNewsDetail(news.dataId)">
                        <div class="newsTitle">{{news.title}}</div>
                        <div class="author">{{news.author}}<span class="newsDate">{{news.company}}</span> <span class="newsDate">{{news.pushDate | formatTime}}</span></div>
                    </div>
                </div>
            </div>
        </div>
    </body>
    
    <script type="text/javascript">
        var app = new Vue({
          el: '#app',
          data: {
           imageList: [],
           newsList:[],
           artTradeList: [
                {
                    "module": "",
                    "moduleName":"全部",
                    "selected":true
                },
                 {
                     "module": "日常发布",
                     "moduleName":"日常发布",
                     "selected":false
                 },
                {
                    "module": "专题竞赛",
                    "moduleName":"专题竞赛",
                    "selected":false
                },
           
           ]
          },
          filters:{
            formatTime(val){
                if (val == null) {
                    return ""
                }
                return moment(val).format("YYYY-MM-DD HH:mm")
            }
          },
          created () {
              window.getNewsList = this.getNewsList
              window.clear = this.clear
              window.getImageList = this.getImageList
          },
          methods:{
              getImageList (imageList) {
                  this.imageList = imageList
              },
              getNewsList (newsList) {
                  for(let i=0;i<newsList.length;i++){
                      this.newsList.push(newsList[i])
                  }
              },
              clear() {
                  this.newsList = []
              },
              
              moduleClick (index){
                this.moduleList.forEach(item => {item.selected = false})
                this.moduleList[index].selected = true
                var params = {
                    module:this.moduleList[index].module
                }
                WebViewJavascriptBridge.callHandler('moduleChange',params,function(response) {
                                                                    
               });
    
              },
              
              tradeClick (index) {
                 this.artTradeList.forEach(item => {item.selected = false})
                 this.artTradeList[index].selected = true
                 var params = {
                     module:this.artTradeList[index].module
                 }
                 WebViewJavascriptBridge.callHandler('tradeChange',params,function(response) {
                                                     
                 });
                },
              
              toNewsDetail (dataId){
                var params = {
                    newsId:dataId
                }
                WebViewJavascriptBridge.callHandler('toNewsDetailViewController',params,function(response) {
                                     
                 });
                
              },
              toVideoDetail (index) {
                  let news = this.newsList[index]
                  let params = {
                      dataId: news.dataId,
                      coverUrl:news.coverUrl
                  }
                  WebViewJavascriptBridge.callHandler('toVideoDetailViewController',params,function(response) {
                     
                  });
                
              },
              toTopicDetail (dataId) {
                  var params = {
                      dataId:dataId
                  }
                  WebViewJavascriptBridge.callHandler('toTopicDetailViewController',params,function(response) {
                          
                   });
              }
          }
        })
    </script>
</html>
